/*
 * @Description: 接收，导出 模板组件
 * @Author: Rfan
 * @Date: 2022-09-22 15:02:30
 * @LastEditTime: 2022-09-22 15:09:41
 */

import { useEffect, useState } from 'react';
import { Select, Space } from 'antd';
import cs from 'classnames';
import classNames from 'classnames/bind';
import { fetchTemplateList } from '@/api/accession';
import type { InputStatus } from 'antd/es/_util/statusUtils';
import styles from './styles/index.module.scss';
import { EnumTemplateTypes } from '@/view/system/TemplateManage/dictionaries';

const cx = classNames.bind(styles);

type Props = {
  value?: number;
  classname?: string;
  /**
   * 模板类型：0-excel导入；1-excel导出；2-CD导入；3-CD导出；4-SIP导入；5-SIP导出；
   */
  tplType: EnumTemplateTypes;
  templateState?: InputStatus;
  onChange?: (value: number) => void;
};

const TransferTemplate = (props: Props) => {
  const { classname, value, tplType, templateState = '', onChange } = props;

  // 模板列表
  const [templateList, setTemplateList] = useState([]);

  useEffect(() => {
    // 获取模板列表
    fetchTemplateList({ tplType }).then((res) => {
      const { data } = res;
      setTemplateList(data);
      if (data.length > 0) {
        setSelectTemplate(data[0].id);
      }
    });
  }, []);

  const setSelectTemplate = (val: number) => {
    onChange?.(val);
  };

  return (
    <div className={cs(classname, cx('transfer-template'))}>
      <Space>
        <Select
          className={cx('temp-select')}
          options={templateList.map((tpl) => ({ value: tpl.id, label: tpl.tplName }))}
          value={value}
          placeholder="请选择模板"
          status={templateState}
          onChange={setSelectTemplate}
        />
      </Space>
    </div>
  );
};

export default TransferTemplate;
